<template>
  <div class="value-selector">
    <FormOptionSelect
      v-if="isOptionType"
      :enable-remove-html-tag="false"
      :item="{ field }"
      :modelValue="modelValue"
      :multiple="isMultipleSelect"
      :placeholder="$t('form.dataFilter.selectOption')"
      allow-create
      clearable
      default-first-option
      filterable
      size="default"
      valueProp="value"
      @update:modelValue="handleChange"
      @change-label="handleChangeLabel"
    />
    <FormCascaderSelect
      v-else-if="isCascaderType"
      :item="{ field }"
      :modelValue="modelValue"
      :placeholder="$t('form.dataFilter.selectOption')"
      :props="cascaderProps"
      clearable
      filterable
      size="default"
      @change-label="handleChangeLabel"
      @update:modelValue="handleChange"
    />
    <el-date-picker
      v-else-if="isDateType"
      :format="dateFormat"
      :modelValue="modelValue"
      :placeholder="$t('form.dataFilter.datePlaceholder')"
      :type="dateType"
      :value-format="dateValueFormat"
      size="default"
      @update:modelValue="handleChange"
    />
    <el-input-number
      v-else-if="isNumberType"
      :max="field.scheme?.max"
      :min="field.scheme?.min"
      :modelValue="modelValue"
      :placeholder="$t('form.dataFilter.enterCondition')"
      :precision="field.scheme?.precision || 0"
      :step="field.scheme?.step || 1"
      size="default"
      @update:modelValue="handleChange"
    />
    <el-input
      v-else
      :modelValue="modelValue"
      :placeholder="$t('form.dataFilter.enterCondition')"
      size="default"
      @update:modelValue="handleChange"
    />
  </div>
</template>

<script lang="ts" setup>
import type { PropType } from "vue";
import { computed, watch } from "vue";
import { FieldItem } from "@/api/project/form";
import FormOptionSelect from "@/views/components/FormOptionSelect/index.vue";
import FormCascaderSelect from "@/views/components/FormOptionSelect/cascader.vue";

const props = defineProps({
  field: {
    type: Object as PropType<FieldItem>,
    default: () => ({})
  },
  modelValue: {
    type: [String, Number, Array, Object],
    default: ""
  }
});

const fieldType = computed(() => props.field.type || "INPUT");
// 计算属性
const isOptionType = computed(() => ["SELECT", "CHECKBOX", "RADIO"].includes(fieldType.value));
const isDateType = computed(() => ["DATE"].includes(fieldType.value));
const isMultipleSelect = computed(() => ["CHECKBOX"].includes(fieldType.value));
const isCascaderType = computed(() => ["CASCADER"].includes(fieldType.value));
const isNumberType = computed(() => ["NUMBER"].includes(fieldType.value));

// 级联选择器配置
const cascaderProps = computed(() => ({
  value: props.field.scheme?.valueKey || "value",
  label: props.field.scheme?.labelKey || "label",
  children: props.field.scheme?.childrenKey || "children",
  checkStrictly: props.field.scheme?.checkStrictly || false,
  multiple: props.field.scheme?.multiple || false
}));

// 日期相关配置
const defaultDateTimeFormat = "YYYY-MM-DD HH:mm:ss";
const dateFormat = computed(() => props.field.scheme?.format || defaultDateTimeFormat);
const dateType = computed(() => props.field.scheme?.type || "datetime");
const dateValueFormat = computed(() => props.field.scheme?.["value-format"] || defaultDateTimeFormat);

const emit = defineEmits(["update:modelValue", "change", "change-label"]);

// 处理值变化
const handleChange = (value: any) => {
  emit("update:modelValue", value);
  emit("change", value);
};

// 监听值变化
watch(
  () => props.modelValue,
  newVal => {
    if (newVal !== undefined) {
      handleChange(newVal);
    }
  }
);

const handleChangeLabel = (label: string) => {
  emit("change-label", label);
};
</script>

<style lang="scss" scoped>
.value-selector {
  width: 100%;

  :deep(.el-select),
  :deep(.el-date-picker),
  :deep(.el-input),
  :deep(.el-cascader),
  :deep(.el-input-number) {
    width: 100%;
  }
}
</style>
